"Image_hover_Effects"
Bootstrap 3.0.0 Snippet by Siddharth Panchal

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<h1>CSS Image Hover Effects</h1>
<p>← <a href="https://www.nxworld.net/tips/css-image-hover-effects.html" target="_blank">View the article</a></p>
<h2>No Effect</h2>
<div class="column">
<div>
<figure><img class="img-responsive pic-1" src="https://www.w3schools.com/bootstrap4/img_avatar5.png"></figure>
<span>Hover</span>
</div>
<div>
<figure><img class="img-responsive pic-1" src="https://www.w3schools.com/bootstrap4/img_avatar4.png"></figure>
<span>Hover</span>
</div>
<div>
<figure><img class="img-responsive pic-1" src="https://www.w3schools.com/bootstrap4/img_avatar3.png"></figure>
<span>Hover</span>
</div>
</div>
<h2 id="demo01">1. Zoom In #1</h2>
<div class="hover01 column">
<div>
<figure><img class="img-responsive pic-1" src="https://www.w3schools.com/bootstrap4/img_avatar5.png"></figure>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
body,h1+p a{color:#333}
body,h1,h1+p,h2{font-weight:300}
.column div span,h1+p a:hover{text-decoration:none}
body{font-family:'Open Sans',sans-serif}
h1,h1+p{margin:30px 15px 0}
h2{margin:60px 15px 0;padding:0}
h2 span{margin-left:1em;color:#aaa;font-size:85%}
.column{margin:15px 15px 0;padding:0}
.column:last-child{padding-bottom:60px}
.column::after{content:'';clear:both;display:block}
.column div{position:relative;float:left;width:300px;height:200px;margin:0 0 0 25px;padding:0}
.column div span,figure{margin:0;padding:0;width:300px}
.column div:first-child{margin-left:0}
.column div span{position:absolute;bottom:-20px;left:0;z-index:-1;display:block;color:#444;font-size:18px;text-align:center;-webkit-transition:.3s ease-in-out;transition:.3s ease-in-out;opacity:0}
.hover14 figure::before,.hover15 figure::before{z-index:2;display:block;content:''}
figure{height:200px;background:#fff;overflow:hidden}
figure:hover+span{bottom:-36px;opacity:1}
.hover01 figure img{-webkit-transform:scale(1);transform:scale(1);-webkit-transition:.3s ease-in-out;transition:.3s ease-in-out}
.hover01 figure:hover img{-webkit-transform:scale(1.3);transform:scale(1.3)}
.hover02 figure img{width:300px;height:auto;-webkit-transition:.3s ease-in-out;transition:.3s ease-in-out}
.hover02 figure:hover img{width:350px}
.hover03 figure img{-webkit-transform:scale(1.5);transform:scale(1.5);-webkit-transition:.3s ease-in-out;transition:.3s ease-in-out}
.hover03 figure:hover img{-webkit-transform:scale(1);transform:scale(1)}
.hover04 figure img{width:400px;height:auto;-webkit-transition:.3s ease-in-out;transition:.3s ease-in-out}
.hover04 figure:hover img{width:300px}
.hover05 figure img{margin-left:30px;-webkit-transform:scale(1.5);transform:scale(1.5);-webkit-transition:.3s ease-in-out;transition:.3s ease-in-out}
.hover05 figure:hover img{margin-left:0}
.hover06 figure img{-webkit-transform:rotate(15deg) scale(1.4);transform:rotate(15deg) scale(1.4);-webkit-transition:.3s ease-in-out;transition:.3s ease-in-out}
.hover06 figure:hover img{-webkit-transform:rotate(0) scale(1);transform:rotate(0) scale(1)}
.hover07 figure img{-webkit-filter:blur(3px);filter:blur(3px);-webkit-transition:.3s ease-in-out;transition:.3s ease-in-out}
.hover07 figure:hover img{-webkit-filter:blur(0);filter:blur(0)}
.hover08 figure img{-webkit-filter:grayscale(100%);filter:grayscale(100%);-webkit-transition:.3s ease-in-out;transition:.3s ease-in-out}
.hover08 figure:hover img{-webkit-filter:grayscale(0);filter:grayscale(0)}
.hover09 figure img{-webkit-filter:sepia(100%);filter:sepia(100%);-webkit-transition:.3s ease-in-out;transition:.3s ease-in-out}
.hover09 figure:hover img{-webkit-filter:sepia(0);filter:sepia(0)}
.hover10 figure img{-webkit-filter:grayscale(0) blur(0);filter:grayscale(0) blur(0);-webkit-transition:.3s ease-in-out;transition:.3s ease-in-out}
.hover10 figure:hover img{-webkit-filter:grayscale(100%) blur(3px);filter:grayscale(100%) blur(3px)}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Light Bootstrap Dashboard Pro Angular

Questions / Comments: